
<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
  <ol b-l81u9o5gjc="">
    <li status="previous" blazor:onclick="1" style="height: 100%;" b-a5o5s1yurv="">
      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5">
          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5c.3.3.77.3 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"></path>
        </svg>
      </div>
      <div hidden-when="xs" b-a5o5s1yurv="">
        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
      </div>
    </li>
    <li status="current" blazor:onclick="2" style="height: 100%;" b-a5o5s1yurv="">
      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="6" blazor:onclick="7">
          <path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
        </svg>
      </div>
      <div hidden-when="xs" b-a5o5s1yurv="">
        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
      </div>
    </li>
  </ol>
  <div class="fluent-wizard-content" b-l81u9o5gjc="">
    <div style="display: none;" b-l81u9o5gjc="">
      <form blazor:onsubmit="9">
        <fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="5" appearance="outline" blazor:onchange="11" blazor:oninput="12" blazor:elementreference=""></fluent-number-field>
      </form>
    </div>
    <div style="" b-l81u9o5gjc="">
      <form blazor:onsubmit="10">
        <div>
          <ul class="validation-errors">
            <li class="validation-message">The field NumberBetween1and10 must be between 1 and 10.</li>
          </ul>
        </div>
        <fluent-number-field class="invalid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="15" appearance="outline" blazor:onchange="13" blazor:oninput="14" aria-invalid="true" blazor:elementreference=""></fluent-number-field>
      </form>
    </div>
  </div>
  <div class="fluent-wizard-buttons" b-l81u9o5gjc="">
    <fluent-button style="width: 80px;;" type="button" appearance="neutral" blazor:onclick="15" b-x1200685t0="" blazor:elementreference="">Previous</fluent-button>
    <span style="margin-right: 10px" b-l81u9o5gjc=""></span>
    <fluent-button style="width: 80px;;" type="button" appearance="accent" blazor:onclick="16" b-x1200685t0="" blazor:elementreference="">Done</fluent-button>
  </div>
</div>